<template>
    <view>
        <scroll-view scroll-y="true" class="scrollheight">
            <view v-for="spec of attrs" :key="spec.ID" class="sku-item">
                <text class="sku-item-title"> {{ spec.AttributeName }} </text>
                <view class="sku-item-select">
                    <text
                        v-for="item of spec.ValueList"
                        :key="item.ID"
                        class="btn btn-gray-fill"
                        :class="{
                            'btn-success-fill': item.ID === selectedAttrMap[spec.ID],
                            'btn-disable': isDirect
                                ? isAttrDisabled(item.ID)
                                : isAttrDisabled(item.ID) || isNoStock(item.ID),
                        }"
                        @click="handleSelectAttr(data, item.ID, spec.ID)">
                        {{ item.ValueStr }}</text
                    >
                </view>
            </view>
        </scroll-view>
        <view>
            <view class="product-parameter" v-if="selectedProduct && selectedProduct.Remark">
                产品参数：{{ selectedProduct.Remark }}</view
            >
            <view
                class="num-item num-item-class"
                v-if="selectedProduct && selectedProduct.SkuModel.ProductUnitPrice.IsCustomized">
                <view>单{{ actions[unitActiveIndex].unitName }}/{{ actions[0].unitName }}</view>
                <view>
                    <view class="input-number-box">
                        <text
                            class="btn-minus"
                            :class="selectedProduct && selectedProduct.Ratio <= 0 ? 'color-shadow' : ''"
                            @click="changeRatio(selectedProduct, selectedProduct.Ratio, -1)"
                            >-</text
                        >
                        <view class="btn-input-box">
                            <input
                                v-model="selectedProduct.Ratio"
                                type="digit"
                                maxlength="10"
                                max="9999999999"
                                class="btn-input"
                                @blur="changeRatio(selectedProduct, selectedProduct.Ratio, 0)" />
                        </view>
                        <text class="btn-plus" @click="changeRatio(selectedProduct, selectedProduct.Ratio, 1)">+</text>
                    </view>
                </view>
            </view>

            <view class="num-item num-item-class">
                <view style="font-size:26rpx">购买数量</view>
                <view class="num-value">
                    <view class="actionstip" v-if="unitActiveIndex > 0">
                        <text v-if="selectedProduct && selectedProduct.SkuModel.ProductUnitPrice.IsCustomized"
                            >{{ selectedProduct.Ratio }}{{ data.DefaultUnit }}/{{
                                actions[unitActiveIndex].unitName
                            }}</text
                        >
                        <text
                            v-else-if="
                                selectedProduct && !selectedProduct.SkuModel.ProductUnitPrice.IsCustomized && actions
                            "
                            >{{ actions[unitActiveIndex].ratio }}{{ data.DefaultUnit }}/{{
                                actions[unitActiveIndex].unitName
                            }}</text
                        >
                    </view>
                    <text
                        class="num-price"
                        v-else-if="unitActiveIndex <= 0 && selectedProduct && actions[0].ratio == 1 && !isDirect"
                        >库存：{{ selectedProduct.Stock }}</text
                    >
					
                    <view
                        class="actionstip"
                        v-else-if="unitActiveIndex <= 0 && selectedProduct && actions[0].ratio != 1">
                        <text
                            >{{ actions[unitActiveIndex].ratio }}{{ data.DefaultUnit }}/{{
                                actions[unitActiveIndex].unitName
                            }}</text
                        >
                    </view>
                </view>
				
                <view >
					<view v-if="selectedProduct && selectedProduct.Stock <= 0 && data.IsLackRegister == 1">
						<view class="">
							<view class="append-msg" @click="register(index)"> 缺货登记 </view>
						</view>
					</view>
                    <view class="input-number-box" v-else>
                        <text
                            class="btn-minus"
                            :class="selectedProduct && selectedProduct.Amount <= 0 ? 'color-shadow' : ''"
                            @click="
                                selectedProduct
                                    ? changeAmount(
                                          selectedProduct,
                                          selectedProduct.Amount,
                                          selectedProduct.Stock,
                                          -1,
                                          min,
                                          selectedProduct.Ratio,
                                          limit,
                                          selectedProduct.AddNum,
                                      )
                                    : 'return'
                            "
                            >-</text
                        >
                        <view class="btn-input-box" v-if="selectedProduct">
                            <input
                                v-model="selectedProduct.Amount"
                                type="digit"
                                maxlength="10"
                                max="9999999999"
                                class="btn-input"
                                @blur="
                                    changeAmount(
                                        selectedProduct,
                                        selectedProduct.Amount,
                                        selectedProduct.Stock,
                                        0,
                                        min,
                                        selectedProduct.Ratio,
                                        limit,
                                        selectedProduct.AddNum,
                                    )
                                " />
                        </view>
                        <view class="btn-input-box" v-else>
                            <input
                                v-model="amount"
                                type="digit"
                                maxlength="10"
                                max="9999999999"
                                class="btn-input"
                                disabled="" />
                        </view>
                        <text
                            class="btn-plus"
                            :class="
                                selectedProduct &&
                                (selectedProduct.Amount * selectedProduct.Ratio >= selectedProduct.Stock ||
                                    (selectedProduct.Amount * selectedProduct.Ratio >= limit && limit > 0))
                                    ? 'color-shadow'
                                    : ''
                            "
                            @click="
                                selectedProduct
                                    ? changeAmount(
                                          selectedProduct,
                                          selectedProduct.Amount,
                                          selectedProduct.Stock,
                                          1,
                                          min,
                                          selectedProduct.Ratio,
                                          limit,
                                          selectedProduct.AddNum,
                                      )
                                    : 'return'
                            "
                            >+</text
                        >
                    </view>
                    <text class="num-price" v-if="unitActiveIndex > 0 && selectedProduct && !isDirect"
                        >库存：{{ selectedProduct.Stock }}</text
                    >
                    <text
                        class="num-price"
                        v-if="unitActiveIndex <= 0 && selectedProduct && actions[0].ratio != 1 && !isDirect"
                        >库存：{{ selectedProduct.Stock }}</text
                    >
                </view>
            </view>
        </view>
        <view class=""> </view>
    </view>
</template>

<script>
import numPopup from "@/components/order/num-popup.vue"
import utilsOld from "@/utils/utilsOld.js"
import storage from "@/uni-sub-base/utils/storage.js"
import { eventBus } from "@/utils/eventBus.js"
import { getAmountInTempCart, getAmountInTempCartAct } from "@/utils/tempCartUtil.js"
export default {
    components: {
        numPopup,
    },
    props: {
        data: {
            // 数据
            type: Object,
            required: true,
        },
        amount: {
            // 默认购买数量
            type: Number,
            default: 0,
        },
        products: {
            // sku 产品列表
            type: Array,
            default: () => [],
        },
        attrs: {
            // 规格列表
            type: Array,
            default: () => [],
        },
        addCartShow: {
            // 加入购物车按钮显示
            type: Boolean,
            default: true,
        },
        min: {
            // 最少购买
            type: Number,
            default: 0,
        },
        limit: {
            // 已达到最大
            type: Number,
            default: 0,
        },
        addNum: {
            // 加
            type: Number,
            default: 1,
        },
        unitActiveIndex: {
            // 选中单位
            type: Number,
            default: 0,
        },
        tempType: {
            type: Number,
            default: 0,
        },
        isDirect: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            selectedAttrMap: {}, // 当前 每个attr 选中的 值,

            selectedProduct: null, // 选中规格字段

            singleAttr: {}, // 选中对应sku 产品(组合商品)

            single: {}, // 选中规格对象(单位下规格)

            actions: [], // 多单位(数量那边显示)

            cartDatas: [], // 购物车

            currentNoStockId: null, // 没有库存选择ValueId

            currentNoStockkey: null, // 没有库存选择ValueKey

            currentNoStockFlag: false, // 有没有库存标签
        }
    },
    watch: {
        //监听临时购物车数据
        data(newVal, oldVal) {
            this.data = newVal
        },
        unitActiveIndex(newVal, oldVal) {
            if (newVal != oldVal) {
                this.changeInfos()
            }
        },
        watch: {
            refresh(e) {
                if (e) {
                    this.$forceUpdate()
                }
            },
        },
    },
    computed: {
        specMap() {
            //  attrs 对象， 方便查询 {id: list}
            const res = {} // res
            this.attrs.forEach((spec) => {
                // 设置初始值
                res[spec.ID] = spec.ValueList.map((item) => item.ID)
            })
            return res
        },
        productsWithAttrs() {
            // 所有规格ID组合
            return this.products.map((product) => {
                const attrObj = {}
                product.ProductSkuItemsList.forEach((item) => {
                    attrObj[item.AttributeId] = item.ValueId
                })
                const attrIDStr = this.attrs.map((attr) => attrObj[attr.ID]).join(",")
                return {
                    ...product,
                    attrIDStr,
                }
            })
        },
        allAttrValues() {
            // 所有规格的可选属性, {ID: boolean}
            const res = {} // 初始可选
            this.attrs.forEach((spec) => {
                // 设置初始值
                spec.ValueList.forEach((item) => {
                    res[item.ID] = true
                })
            })
            return res
        },
        availableAttrs() {
            // 计算可选的属性列表
            // 对spec 选中的类型进行遍历
            const obj = Object.entries(this.selectedAttrMap).reduce((prev, cur) => {
                let temp = {}
                const [key, val] = cur
                if (!val) {
                    // 值不存在时，跳过当前
                    return prev
                }

                if (this.attrs.length > 1) {
                    // 添加当前规格中的其他属性值都可点击true（多规格情况）
                    this.specMap[key].forEach((item) => {
                        if (prev[item]) {
                            // 取交集
                            temp[item] = true
                        }
                    })
                }

                // 添加 skuList 包含选中值的其他属性
                this.products.forEach((sku) => {
                    // 锁禁用灰色
                    if (sku.IsLock) {
                        return false
                    }
                    if (this.attrs.length > 1) {
                        const findAttr = sku.ProductSkuItemsList.find((skuItem) => skuItem.ValueId === val)
                        if (findAttr) {
                            sku.ProductSkuItemsList.forEach((item) => {
                                if (prev[item.ValueId]) {
                                    // 多规格取交集
                                    temp[item.ValueId] = true // 可点击
                                }
                            })
                        }
                    } else {
                        sku.ProductSkuItemsList.forEach((item) => {
                            if (prev[item.ValueId]) {
                                // 单规格
                                temp[item.ValueId] = true // 可点击
                            }
                        })
                    }
                })
                return temp // 将上次的结果返回给下一次遍历
            }, this.allAttrValues)
            return obj
        },
        availableNoStock() {
            const obj = Object.entries(this.selectedAttrMap).reduce((prev, cur) => {
                let temp = {}
                const [key, val] = cur
                if (!val) {
                    // 值不存在时，跳过当前
                    return prev
                }

                // 单规格情况,同规格需判断库存是否0,不直接置为正常状态
                if (this.attrs.length > 1) {
                    // 和选中属性的其他属性值置为正常状态(多规格情况下)
                    this.specMap[key].forEach((item) => {
                        if (prev[item]) {
                            // 取交集
                            temp[item] = true
                        }
                    })
                }
                // 添加 skuList 包含选中值的其他属性
                this.products.forEach((sku) => {
                    // 库存0灰色||sku.Stock==0(currentNoStockId==null用于判断点击库存为0但不显示灰即初始化时,另外对应的属性库存0置灰)(点击同一个属性且库存0属性,其他种的对应属性库存0置灰)
                    if (
                        (sku.Stock == 0 && this.currentNoStockId == null) ||
                        (sku.Stock == 0 && this.currentNoStockkey == key)
                    ) {
                        // 单规格情况(即初始化currentNoStockId==null),选中库存0且,则置为选中状态
                        if (this.attrs.length == 1 && sku.Stock == 0 && this.currentNoStockkey == key) {
                            temp[val] = true
                        }
                        // if (sku.Stock==0&&this.currentNoStockkey==key) {
                        // 	let arr = Object.keys(this.selectedAttrMap)
                        // 	arr.map((item,index)=>{
                        // 		if (item!=this.currentNoStockkey) {
                        // 			delete this.selectedAttrMap[item]
                        // 		}
                        // 	})
                        // }
                        return false
                    }
                    const findAttr = sku.ProductSkuItemsList.find((skuItem) => skuItem.ValueId === val) // 有库存且选中则选中状态true
                    if (findAttr) {
                        sku.ProductSkuItemsList.forEach((item) => {
                            if (prev[item.ValueId]) {
                                // 取交集
                                temp[item.ValueId] = true // 有库存可点击状态
                                if (this.currentNoStockId) {
                                    temp[this.currentNoStockId] = true // 多规格点击库存0时设置当前点击的属性颜色为可点击
                                }
                            }
                        })
                    } else {
                        // 单规格情况,库存不为0且不点击(找不到对应sValueId != val),则恢复正常状态
                        if (
                            (this.attrs.length == 1 && this.currentNoStockkey == key) ||
                            (this.attrs.length == 1 && this.currentNoStockkey != key)
                        ) {
                            temp[sku.ProductSkuItemsList[0].ValueId] = true
                        }
                    }
                })
                return temp // 将上次的结果返回给下一次遍历
            }, this.allAttrValues)
            return obj
        },
        selectedAttrCount() {
            // 当前选中 attr 的数量
            let count = 0
            Object.values(this.selectedAttrMap).forEach((value) => {
                if (value) {
                    count++
                }
            })
            return count
        },
    },
    mounted() {
        // 无属性情况(直接加入购物车)
        if (this.attrs && this.attrs.length <= 0) {
            this.data.ProductUnitList[this.unitActiveIndex].ProductSkuAttrList.forEach((e, index) => {
                console.log("e:", e)
                this.getCurrentNum(e)
                if (index == 0) {
                    // 无属性情况直接将属性字段赋值给selectedProduct
                    this.selectedProduct = e
                    if (!this.selectedProduct.IsLock && this.selectedProduct.Stock > 0) {
                        this.addCartShow = true // 加入购物车按钮是否置灰 属性全选库存不为0可加入购物车
                    } else {
                        this.addCartShow = false
                    }
                    this.$forceUpdate()
                    this.setCarListFunc(e)
                    this.$emit("handleSelectAttr", this.data, e, this.addCartShow)
                }
            })
        }
        // 多单位(如米/支)用于一开始显示
        this.actions = []
        if (this.data.ProductUnitList && this.data.ProductUnitList.length >= 1) {
            this.data.ProductUnitList.forEach((element) => {
                this.actions.push({
                    text: element.Title,
                    ratio: element.Ratio,
                    unitName: element.UnitName,
                    unitId: element.UnitId,
                })
            })
        }

        this.$forceUpdate()
        //监听广播 获取购物车数据
        eventBus.$on("SET_CART_FOR_SUB", (msg) => {
            if (msg) {
                this.cartDatas = msg
                if (!this.noLast) {
                    this.data.ProductUnitList[this.unitActiveIndex].ProductSkuAttrList.forEach((e) => {
                        this.getCurrentNum(e)
                    })
                }
                this.$forceUpdate()
            }
        })
        //广播获取获购物车数据
        eventBus.$emit("GET_CART_DATA_FOR_SUB", "")
    },
    destroyed() {
        //取消监听
        eventBus.$off("SET_CART_FOR_SUB")
    },
    methods: {
        // 单规格获取amount
        getCurrentNum(item) {
            console.log("this.cartDatas:", this.cartDatas)
            if (this.tempType == 0) {
                this.cartDatas.forEach((e) => {
                    e.newSubItems.forEach((v) => {
                        if (v.ProductId == item.ProductId) {
                            v.SubItems.forEach((sub) => {
                                if (sub.SkuId == item.SkuId && item.UnitId == sub.UnitId) {
                                    item.Amount = sub.Amount
                                }
                            })
                        }
                    })
                })
            } else if (this.tempType == 1) {
                let amount = getAmountInTempCart(item)
                item.Amount = amount
            } else if (this.tempType == 3) {
                let amount = getAmountInTempCartAct(item)
                item.Amount = amount
            }
            if (item.Amount > 1) {
                this.setCarListFunc(item)
            }
        },
        // 有属性时的属性选择
        handleSelectAttr(data, ID, key) {
            // if (this.selectedAttrMap[key] === ID) { // 取消
            // 	this.$set(this.selectedAttrMap, key, null)
            // } else { // 设置选中值
            // 	this.$set(this.selectedAttrMap, key, ID)
            // }
            // // 全部选中返回sku
            // this.selectedProduct = this.getSelectedProduct()

            // 锁禁止选中
            if (this.isAttrDisabled(ID)) {
                return false
            }

            // 避免残留上次选择
            this.currentNoStockkey = null
            this.currentNoStockId = null
            this.currentNoStockFlag = false
            // 判断是否点击库存0的属性
            if (this.isNoStock(ID)) {
                this.currentNoStockkey = key
                this.currentNoStockId = ID
                this.currentNoStockFlag = true
            }

            // 判断库存是否为0
            this.isNoStock(ID)

            // 选中设置样式不取消
            this.$set(this.selectedAttrMap, key, ID)

            // 商品信息变化
            this.changeInfos()
            this.$forceUpdate()
        },
        // 选择属性商品信息变化
        changeInfos() {
            console.log("this.data:", this.data)
            if (this.selectedAttrCount === this.attrs.length) {
                // 是否都选中,都选中价格/图片随着规格变化
                const selectedIDStr = this.attrs.map((attr) => this.selectedAttrMap[attr.ID]).join(",")
                const find = this.productsWithAttrs.find((product) => product.attrIDStr === selectedIDStr)
                this.singleAttr = find // 选中对应sku 产品该组合商品
                // 单位下规格
                this.data.ProductUnitList[this.data.UnitActiveIndex].ProductSkuAttrList.map((item, index) => {
                    this.singleAttr.ProductSkuItemsList.map((item2, index2) => {
                        if (item.ValueId == item2.ValueId) {
                            if (item.ProductAttrList.length > 0) {
                                this.single = item.ProductAttrList
                                // 规格下种类,获取商品信息
                                this.single.map((item3, index3) => {
                                    this.singleAttr.ProductSkuItemsList.map((item2, index2) => {
                                        if (item2.ValueId == item3.ValueId) {
                                            console.log(111111111111)
                                            this.selectedProduct = item3
                                        }
                                    })
                                })
                            } else {
                                console.log(2222222222)
                                console.log("item:", item)
                                this.selectedProduct = item
                            }
                        }
                    })
                })
                this.data.ThumbnailUrl310 = this.selectedProduct.SkuModel.SkuImg // 商品图片
                this.data.CurrentMinPrice = this.selectedProduct.SkuModel.ProductUnitPrice.Price // 商品价格

                this.data.selected = true // 价格是否显示区间  属性全选显示具体

                if (this.selectedProduct.Stock > 0) {
                    this.addCartShow = true // 加入购物车按钮是否置灰 属性全选库存不为0可加入购物车
                } else {
                    this.addCartShow = false
                }
                this.$forceUpdate()
                console.log("this.selectedProduct:", this.selectedProduct)
                this.setCarListFunc(this.selectedProduct)
                this.$emit("handleSelectAttr", this.data, this.selectedProduct, this.addCartShow)
            } else {
                let min = 0
                let max = 0
                // 最大最小价格
                this.data.ProductUnitList[this.data.UnitActiveIndex].SkuUnitPriceList.forEach((e, index) => {
                    let price = e.Price
                    if (index == 0) {
                        min = price
                        max = price
                    } else {
                        if (price < min) {
                            min = price
                        }
                        if (price > max) {
                            max = price
                        }
                    }
                })
                this.data.CurrentMinPrice = min
                this.data.CurrentMaxPrice = max
                this.data.ThumbnailUrl310 =
                    this.data.ProductUnitList[
                        this.data.UnitActiveIndex
                    ].ProductSkuAttrList[0].ProductAttrList[0]?.SkuModel?.SkuImg
                this.data.selected = false // 价格是否显示区间  属性全选显示价格区间
                this.addCartShow = false // 加入购物车按钮是否置灰 属性全没全选置灰无操作
            }
        },
        // 是否锁
        isAttrDisabled(ID) {
            return !this.availableAttrs[ID]
        },
        // 是否有库存
        isNoStock(ID) {
            return !this.availableNoStock[ID]
        },
        // 全部选中显示购买
        getSelectedProduct() {
            if (this.selectedAttrCount === this.attrs.length) {
                // 全部选中
                const selectedIDStr = this.attrs.map((attr) => this.selectedAttrMap[attr.ID]).join(",")
                const find = this.productsWithAttrs.find((product) => product.attrIDStr === selectedIDStr)
                return this.find
            } else {
                return null
            }
        },
        // 购买数量加减
        changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy, addNum) {
            if (num == 999999 && type == 1) {
                return false
            }
            if (stock <= 0 && !this.isDirect) {
                return
            }
            if (item.SkuModel.LimitBuy > 0) {
                LimitBuy = item.SkuModel.LimitBuy
            }
            if (item.SkuModel.AddNum > 0) {
                addNum = item.SkuModel.AddNum
            } else {
                addNum = this.addNum
            }
            if (item.SkuModel.MinimumOrder > 0) {
                minNum = item.SkuModel.MinimumOrder
            }
            const _oldAmount = item.Amount
            num = Number(num)
            addNum = UnitRatio && UnitRatio == 1 ? addNum : 1
            addNum = addNum == 0 ? 1 : addNum
            utilsOld.changeAmountclassNew(item, num, stock, type, minNum, UnitRatio, LimitBuy, addNum, this.isDirect)
            this.$emit("changeAmount", item.Amount)
            if (_oldAmount !== item.Amount || type === 0) {
                const _obj = {}
                _obj.ProductId = item.ProductId
                _obj.Amount = item.Amount
                _obj.SkuId = item.SkuId
                _obj.UnitId = item.UnitId
                _obj.UnitName = item.UnitName
                _obj.ValueId = item.ValueId
                _obj.Ratio = item.Ratio
                _obj.CartProductName = this.data.ProductName
                _obj.CartProductPrice = item.V_FactPrice
                _obj.CartProductImage = item.SkuModel.SkuImg
                _obj.CartProductAttribute = item.V_AttributeNameValue

                // 同步多规格要加入购物车的数据
                this.setCarListFunc(_obj)
                this.$forceUpdate()
            }
        },
        // 加入购物车
        setCarListFunc(obj) {
            this.$emit("setCarListFunc", obj)
            this.$forceUpdate()
        },
        // 多单位定制
        changeRatio(item, num, type) {
            if (type != 0) {
                item.Ratio = Number(num) + Number(type)
                if (type == -1) {
                    if (num > 1) {
                        item.Ratio = Number(num) - 1
                    } else {
                        item.Ratio = 1
                    }
                }
            } else {
                if (num > 0) {
                    item.Ratio = Number(num)
                    this.$forceUpdate()
                } else {
                    item.Ratio = 1
                    this.$forceUpdate()
                }
            }
            this.$forceUpdate()
        },
		register(index) {
		    let data = this.data
		    let info = this.selectedProduct
		    storage.setCache("")
		    this.easyGoTo(
		        "/pages_shop/packet/product/register?info=" +
		            encodeURIComponent(JSON.stringify(info)) +
		            "&data=" +
		            encodeURIComponent(JSON.stringify(data)),
		    )
		    // uni.navigateTo({
		    // 	url:'/pages_shop/packet/product/register?info='
		    // 	+JSON.stringify(info)+'&data='+JSON.stringify(data),
		    // })
		},
    },
}
</script>

<style lang="scss" scoped>
.sku-item {
    display: flex;
    flex-direction: column;
    // margin-bottom: 20rpx;

    .sku-item-title {
        text {
            color: #666666;
        }
    }

    .sku-item-select {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 20rpx 0 0;

        .btn {
            min-width: 100rpx;
            border-radius: $border-radius-10;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
        }
    }
}

.num-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    text {
        display: flex;
        flex: 1;
    }

    .num-value {
        font-size: 28rpx;
        color: $color-gray-1;
    }

    .num-price {
        font-size: 26rpx;
        font-weight: bold;
        color: $color-gray-3;
    }

    .num-price-bold {
        color: $color-orange-1;
        font-weight: bold;
        font-size: 26rpx;
    }
}

.num-item:last-child {
    margin-bottom: 0;
}

.num-item-class {
    padding-top: 10rpx;
}

.btn-input-box {
    width: 103rpx !important;
    margin: 0 10rpx !important;

    .btn-input {
        font-size: 26rpx;
        display: block;
        width: 103rpx !important;
    }
}

.mask-box {
    flex: 1;
    color: $app-color-text-tip;
    font-size: $font-size-24;
}

.product-parameter {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 24rpx;
    color: #333333;
    font-weight: bold;
    height: 80rpx;
    background: #fff9ec;
    margin: 0 -24rpx;
    padding: 0 24rpx;
    margin-bottom: 24rpx;
    // margin-top: -24rpx;
}

.actionstip {
    font-size: 24rpx;
    color: #999999;
}

.scrollheight {
    max-height: calc(40vh - 10rpx);
}

.input-mark {
    display: block;
    text-align: center;
    font-size: $font-size-26;
}

.btn-disable {
    color: #ccc;
    background: #f5f5f5;
}
.append-msg {
    border: 2rpx solid #ff9403;
    color: #ff9403;
    border-radius: 50rpx;
    padding: 4rpx 20rpx;
    font-size: 24rpx;
}
</style>
